<template>
  <div class="foot">
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="goshop" />
      <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :goods-id= this.$route.query.id
        :hide-stock="sku.hide_stock"
        @clicked="onClickButton"
        @buy-clicked="onclick"
        @add-cart="cart"
      />
    </van-goods-action>

    <div class="let" @click="goback">
      <img src="img/YZC/ltes.png" />
    </div>
    <div class="gou" @click="goshop"><img src="img/YZC/shoppcat.png" /></div>
  </div>
</template>
<script>
// import { Toast } from "vant";
import service from "../../../../api/apiserver"
import postapi from "../../../../api/postapi"

export default {
  name: "XQfoot",
  data() {
    return {
      show: false,
      sku: {},
      // 提交商品信息
      skuData: {
        // 商品 id
        goodsId: "1",
        // 选择的商品数量
        selectedNum: 1,
        // 选择的 sku 组合
        selectedSkuComb: {
          id: 1,
          price: "4.5",
          s1: "good[0].img",
          s2: "2",
          s3: "3",
          stock_num: 111,
          property_price: 1,
          previewImgUrl:""
        },
      },
      good: {},
      goods: {},
      arr:{},
      imgs:"",
      name:"",
      isChecked:false,
      money:0,
    };
  },
  methods: {
    onClickIcon() {
      // Toast("点不动");
      // this.$router.push("/service/id="+"001");
    },
    onClickButton() {
      this.show = true;
    },
    goback() {
      this.$router.back();
    },
    onclick(val) {
      console.log(val);
       this.$router.push("/gwc");
      // console.log("立即购买");
    },
    cart(val) {
      console.log(val);
       this.$router.push("/gwc");
      console.log("加入购物车成功");
      postapi("/gwc",{goodsId:val.goodsId,goodsprice:this.money,goodsimg:this.imgs,goodsname:this.name,isChecked:this.isChecked,count:val.selectedNum}).then((ok)=>{
      
      if(ok.data){
       this.$toast.success('加入成功');
      }else{
        this.$toast.success('加入失败');
      }
      })
    },
    goshop(){
      // this.$router.push("/shoppingcart");
    }
  },
  created() {
    // console.log("created", this.$route.params.id);
service("/xiangqing").then((ok)=>{
   
    this.arr = ok.data
    
     this.good = this.arr.filter((v) => {
          if (v.id == this.$route.query.id) {
            return v;
          }

  })
  this.imgs=this.good[0].imgs
  this.name=this.good[0].name
  this.money=this.good[0].money

  console.log(this.good[0].name);
  //  console.log(this.good);


      // console.log(this.good);
      this.sku = {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: this.good[0].img, // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: this.good[0].img, // 用于预览显示的规格类目图片
              },
              {
                id: "2",
                name: "白色",
                imgUrl: this.good[0].imgs,
                previewImgUrl: this.good[0].imgs,
              },
              {
                id: "3",
                name: "橙色",
                imgUrl: this.good[0].imgs,
                previewImgUrl: this.good[0].imgs,
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 1, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: this.good[0].money+"0", // 价格（单位分）
            stock_num: 210, // 当前 sku 组合对应的库存
          },
          {
            id: 2, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "2", // 规格类目 k_s 为 s2 的对应规格值 id
            price: this.good[0].money+"0", // 价格（单位分）
            stock_num: 10, // 当前 sku 组合对应的库存
          },
          {
            id: 3, // skuId
            s1: "3", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "3", // 规格类目 k_s 为 s2 的对应规格值 id
            price: this.good[0].money+"0", // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
        ],
        price: "100.00", // 默认价格（单位元）
        stock_num: 9999, // 商品总库存
        collection_id: 1, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [],
        hide_stock: false, // 是否隐藏剩余库存
      };
      this.goods = {
        // 数据结构见下方文档
        picture: this.good[0].imgs,
      };
  })
  },
};
</script>
<style scoped>
.foot {
  margin-top: 0.4rem;
}
.let {
  width: 0.34rem;
  height: 0.34rem;
  position: fixed;
  top: 0.07rem;
  left: 0.13rem;
  opacity: 0.5;
}
.gou {
  width: 0.3rem;
  height: 0.3rem;
  position: fixed;
  top: 0.07rem;
  right: 0.13rem;
  opacity: 0.5;
}
.let img,
.gou img {
  width: 100%;
  height: 100%;
}
</style>
